<template>
  <div>
    <van-tabbar v-model="active" active-color="red">
      <van-tabbar-item v-for="(item, index) in icon" :key="index" relace :to="item.router"
        :badge="item.router === '/cart' ? goodsCount : ''">
        <span>{{ item.title }}</span>
        <template #icon="props">
          <i :class="icon[index].active"></i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'tabbar',
  data() {
    return {
      active: 0,
      icon: [
        {
          title: '首页',
          active: 'iconfont icon-shouyefill',
          router: '/home'
        },
        {
          title: '分类',
          active: 'iconfont icon-fenlei1',
          router: '/category'
        },
        {
          title: '购物车',
          active: 'iconfont icon-gouwucheman',
          router: '/cart'
        },
        {
          title: '我的',
          active: 'iconfont icon-wodefill',
          router: '/profile'
        }
      ],
    }
  },
  computed: {
    ...mapGetters('cart', ['goodsCount'])
  },
}
</script>

<style lang='less' scoped>
.iconfont {
  font-size: 24px;
}
</style>